<template>
  <el-container>
    <el-aside :width="asideWidth"  style = " height: 100%;">
      <div style="width: 24px">
      </div>
    <el-menu  :collapse="isCollapse" router background-color="#545c64" text-color="#ffffff"
             active-text-color="#ffd04b"
              @open = "handOpen"
              @close = "handClose"
              @select = "handSelect"
              class = "left-menu"
             overflow-x:hidden
              :default-active="$route.path">
      <el-menu-item index="/homeView"><template slot ="title"><i class="el-icon-s-home"></i><span>系统首页</span></template>
      </el-menu-item>
      <el-submenu index="2" v-if="user.role=== '管理员'"><template slot = "title"><i class="el-icon-wind-power"></i><span>信息管理</span></template>
        <el-menu-item @click ="toUser"><template><span>用户信息</span></template></el-menu-item>
        <el-menu-item><template><span>管理员信息</span></template></el-menu-item>
      </el-submenu>

      <el-menu-item index="3"><i class="el-icon-setting"></i>其他资源</el-menu-item>
    </el-menu>
    </el-aside>
  <el-container>
    <el-header>
      <i :class="collapseIcon" style="font-size: 26px "@click="handleCollapse" ></i>
      <el-breadcrumb separator-class ="el-icon-arrow-right" style="margin-left: 20px ">
        <el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/'}">用户信息</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/'}"></el-breadcrumb-item>
      </el-breadcrumb>
      <div style="flex: 1;width: 0;display: flex;align-items: center;justify-content: flex-end;margin: 10px">
        <el-dropdown placement = "bottom" @command = "commandHanle" >
          <img src = "@/assets/logo.png" alt ="" style="width: 40px;height: 40px">
          <el-dropdown-menu  slot="dropdown">
          <el-dropdown-item command = "manage">管理主页</el-dropdown-item>
          <el-dropdown-item command = "profile">个人信息</el-dropdown-item>
          <el-dropdown-item command = "logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </div>

    </el-header>
      <el-main>
        <div style="align-items: center;">
          <el-card style="width: 100%;height:50%;margin: 10px">
            <div slot="header" class="clearfix">
              <span>用户数据</span>
            </div>
            <div>
              <el-table :data="users">
                <el-table-column label="ID" prop="id"></el-table-column>
                <el-table-column label="用户名" prop="username"></el-table-column>
                <el-table-column label="密码" prop="password"></el-table-column>
                <el-table-column label="地址" prop="address"></el-table-column>
                <el-table-column label = "文件上传">
                  <template v-slot="scope">
                  <el-upload
                      action="http://localhost:9090/file/upload"
                      :show-file-list= "false"
                      :on-success="(row,file,fileList) => handTableFileUpload(scope.row,file,fileList)"
                      :headers="{token:user.token}">
                    <el-button type="primary" size = "mini">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
                  </el-upload>
                  </template>
                </el-table-column>
                <el-table-column label="文件上传">
                  <template v-slot="scope">
                    <el-image v-if="scope.row.avatar" :src="scope.row.avatar" style="width: 50px;height: 50px"></el-image>
                  </template>
                </el-table-column>
              </el-table>
            </div>

          </el-card>

        </div>




      </el-main>
      <el-footer>
        尾部
      </el-footer>
  </el-container>
  </el-container>
</template>
<script lang="ts">
import request from "@/utils/request";


  export default {
    name: "HomeView",
    data(){
      return {
        isCollapse:false,
        asideWidth: '200px',
        collapseIcon:'el-icon-s-fold',
        users:[],
        user:JSON.parse(localStorage.getItem('user_data') || '{}'),
        url:[]
      }

    },
    mounted(){
      request.get('/user/selectAll')
          .then(res => {
            this.users = res;
            console.log(this.users);
          })
    },
    methods: {
      handOpen(key,keypath) {console.log('open',key,keypath);},
      handClose(key,keypath) {console.log('close',key,keypath);},
      handSelect(key,keypath) {console.log('select',key,keypath);},
      handleCollapse(){
        this.isCollapse=!this.isCollapse;
        this.asideWidth = this.isCollapse?'50px' : '200px';
        this.collapseIcon = this.isCollapse?'el-icon-s-unfold':'el-icon-s-fold'
      },
      commandHanle(command){
        if(command === 'manage'){
          this.$router.push('/manage');
        }
        else if(command === 'profile'){
          this.$router.push('/profile');
        }
        else if(command === 'logout'){
          this.logout();
        }

      },
      handleFileUpload(response,file,fileList){
        this.fileList = fileList;
      },
      handTableFileUpload(row,file,fileList){
        row.avatar = file.response.data;
        console.log(row,file,fileList);
        request.put('/user/update',row).then(res => {
          if(res.data.code === '200'){
            this.$message.success("上传成功")
          }else{
            this.$message.error(res.data.code);
          }
        })

      },
      logout(){
        this.$message.success("已退出登录")
        localStorage.removeItem('user_data');
        this.$router.push('/login')
      },
      toUser(){
        this.$router.push('user')

      }

    }

  }

</script>
<style>
.left-menu{
  height: 100vh;
  border-right-width: 0;
}
.el-header {
  box-shadow: 2px 0px 6px  rgba(0,21,41,.35);
  display: flex;
  align-items: center;
}

</style>